<template>
	<view class="padding32">
		<u-navbar leftText="返回" :placeholder='true' :fixed='true' bgColor='#f5f5f5'>
			<view class="fontS40" slot="left">
				购物车
				<text class="fontS24">（大批量购买请联系客服！）</text>
			</view>
			<view slot="right" @click="showmanger=!showmanger">
				{{showmanger?'完成':'管理'}}
			</view>
		</u-navbar>
		<u-checkbox-group v-model="checkboxValue1" placement="column" @change="lisChange" activeColor="red">
			<view class="whiteBox mb24" v-for="item in list" :key="item.id" 
				@click="lisClick(item.store_type,item.store_id)">
				<view class="flex" style="align-items:baseline">
					<u-checkbox-group v-model="item.changeList" placement="column" @change="changeList(item)"
						activeColor="red">
						<u-checkbox :customStyle="{marginBottom: '8px'}" name="all"></u-checkbox>
					</u-checkbox-group>
					<view class="" style="margin-left: 24rpx;font-size:24rpx;">
						{{item.stroe_name}}
					</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
				<view class="flex mt24" v-for="(itemm,indexx) in item.goods" :key="indexx"
					@click.stop="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+itemm.goods_id)">
					<u-checkbox :customStyle="{marginBottom: '20%'}" :name="itemm.cart_id">
					</u-checkbox>
					<!-- 未失效 -->
					<view class="" style="flex: 1;">
						<view class="flex fontS24" style="align-items: flex-start;">
							<image :src="itemm.image" style="width: 160rpx;height: 160rpx;border-radius: 20rpx;margin-left: 24rpx;" mode="aspectFill"></image>
							<view style="flex: 1;margin-left: 24rpx;">
								<view class="elipes2 ">
									{{itemm.product_name}}
								</view>
								<view class="guige  co9" v-if="itemm.suk_name">
									{{itemm.suk_name}}
								</view>
								<view class="guige  co9">
									{{itemm.warehouse_type_text}}
								</view> 
								<!-- 标签 -->
								<!-- <view class="flex" style="flex-wrap: wrap;">
									<view class="hunpi" style='margin-right: 10rpx;' v-for="(itemmm,index) in itemm.label" :key="index">{{itemmm}}
									</view>
								</view> -->
							</view>
						</view>
						<view class=" flex" style="align-items: baseline;margin-top: 20rpx;">
							<view style="flex: 1;">
								<view class="flexJBC " style="align-items: baseline;">
									<view class=" homeRed fontS28" style="margin-left: 24rpx;">
										￥{{itemm.price}}
									</view>
									<view class="" style="float: right;">
										<u-number-box :min="1" :max="1000" integer bgColor="#fff" inputWidth='40px' style='height: 48rpx;' v-model="itemm.num" @change='stepChange' :name="itemm.cart_id"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>
		<!-- 商品失效 -->
		<view class="whiteBox mt24" v-if="list1.length>0">
			<view class="flexJBC">
				<view class="">
					失效商品
				</view>
				<view class="fontS24 co6" @click="del(true)">
					清空
				</view>
			</view>
			<view class="flexJBC mt24 " v-for="(item,index) in list1" :key="index" @click.stop="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.goods_id)">
				<image :src="item.image"  style="width: 160rpx;height: 160rpx;border-radius: 20rpx;" mode="aspectFill"></image>
				<view class="" style="margin-left: 24rpx;flex: 1;">
					<view class="elipes2">
						{{item.product_name}}
					</view>
					<view class="flexJBC fontS24" style="margin-top: 48rpx;">
						<view class="homeRed">
							￥{{item.price}}
						</view>
						<view class="co9">
							宝贝暂不可购买
						</view>
						<view class="co9 btnlook" style=""
							@click.stop="$my.go('/pages/cart/similarGoods?id='+item.goods_id)">
							找相似
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车底部 -->
		<view v-if="list.length>0">
			<view style=" " class="flexJBC bottomBoxCLick padding32" v-if="!showmanger">
				<u-checkbox-group v-model="isAll" placement="column" @change="checkboxChange" activeColor="red">
					<view class="flex">
						<u-checkbox name="all"></u-checkbox>
						<view class="">
							全选
						</view>
					</view>
				</u-checkbox-group>
				<view class="">
					<view class="co9 fontS24">
						{{checkboxValue1.length}}种{{totalNum}}件
					</view>
					<view style="margin-top: 12rpx;">
						<text class="fontS24">共计：</text>
						<text class="homeRed fw7">¥{{totalPrice==0?'0.00':totalPrice}}</text>
					</view>
				</view>
				<view class="flex"> 
					<view class="" v-if="false">
						<view class="homeRed">
							已优惠：¥0.12
						</view>
						<view class="homeRed fontS24" style="margin-top: 12rpx;" @click="show=true">
							查看明细
						</view>
					</view>
					<view class="btnClick1 btn bgcred borderred cof" style="" @click="settlement">
						结算
					</view>
				</view>
			</view>
			<view class="flexJBC bottomBoxCLick padding32" v-else>
				<u-checkbox-group v-model="isAll" placement="column" @change="checkboxChange" activeColor="red">
					<view class="flex">
						<u-checkbox name="all"></u-checkbox>
						<view class="">
							全选
						</view>
					</view>
				</u-checkbox-group>
				<view class="flex">
					<view class="btnClick1" style="color: #FFC047;border-color:#FFC047 ;" @click="addfloow">
						加入收藏夹
					</view>
					<view class="btnClick1 borderred homeRed" style="margin-left: 24rpx;" @click="del(false)">
						删除
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<u-popup :show="show" @close="show=false" round='20rpx' mode="bottom" :closeable="true">
			<view class="padding32">
				<view class="fw7 fontS30 center">优惠明细</view>
				<view class=" flexJBC" style="margin-top: 62rpx;">
					<view class="co6 fontS32">
						商品总价
					</view>
					<view class="">
						￥796
					</view>
				</view>
				<view class="mt32 flexJBC">
					<view class="co6 fontS32">
						店铺优惠
					</view>
					<view class=" homeRed">
						-￥100.00
					</view>
				</view>

				<view class=" flexJBC" style="margin-top: 80rpx;">
					<view class="fontS32">
						共减
					</view>
					<view class=" homeRed">
						-￥60.00
					</view>
				</view>
				<view class="mt32 flexJBC">
					<view class="fontS32">
						合计
					</view>
					<view class="">
						668.24
					</view>
				</view>
			</view>
		</u-popup>
		<TabBar :value="value" :changeValue='changeValue' />
	
		<u-empty width='162px' height="140px" :show='(list.length==0) && (!pageLoading) && (list1.length==0)' text="购物车暂无商品~"
			icon="/static/images/cart.png"></u-empty>
		<!-- 加载页 -->
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>
<script>
	import List from '@/componentes/list.vue'
	import TabBar from '@/componentes/TabBar.vue'
	export default {
		data() {
			return {
				list1: [], //失效商品列表
				pageLoading: true,
				totalNum: 0, //共计多少件
				totalPrice:0, //共计多少钱
				total: 0, //商品总条数
				list: [],
				page: 1,
				isAll: [], //全选
				showmanger: false, //是否显示管理页面
				show: false, //查看明细
				value: 2,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [],
				last_page:1,
			};
		},
		onShow() {
			this.getList()
		},
		components: {
			List,
			TabBar
		},
		watch: {
			// 监听复选框
			checkboxValue1(newvalue, old) {
				// 计算总价
				console.log(newvalue,this.total,'newvalue')
				this.totalChangePrice()
				if (newvalue.length < this.total) {
					this.isAll = []
				} else {
					this.isAll = ['all']
				}
			} 
		},
		onReachBottom() {
			if(this.last_page>this.page){
				this.page++
				this.getList()
			}
			
		},
		methods: {
			addfloow(){
				// 移入收藏夹
				let ids=[];
				
				this.list.forEach(item=>{
					item.goods.forEach(item2=>{
						this.checkboxValue1.forEach(item1=>{
							if(item1==item2.cart_id){
								ids.push(item2.goods_id)
							}
						})
					})
				})
				this.$my.post('/index/user/store_follow',{type:2,id:ids.join(','),status:ids.length>1?1:0}).then(res=>{ 
					uni.showToast({ 
						icon:'none',
						title:res.message
					})
				})
			},
			//  结算
			settlement() {
				if (this.checkboxValue1.length > 0) {
					let address_id = '';
					this.$my.get('/index/user/get_address').then(res => {
						if (res.code == 200 && res.data.length > 0) {
							res.data.forEach(item => {
								if (item.is_default) {
									address_id = item.id
								}
							})
							address_id = address_id ? address_id : (res.data[0] ? res.data[0].id : '')
						}
						this.$my.go('/pages/my/order/sureOrder?type=1&cart_id=' + this.checkboxValue1 +
							'&address_id=' + address_id)

					})
				} else {
					this.$my.toast('请先选择商品')
				}

			},
			// 计算总价 和 计算总件数
			totalChangePrice() {
				this.totalPrice =0;
				this.totalNum = 0;
				this.checkboxValue1.forEach(item => {
					this.list.forEach(item1 => {
						item1.goods.forEach((item2, index2) => {
							if (item == item2.cart_id) {
								this.totalPrice += item2.price * item2.num
								this.totalNum += item2.num
							}
						})
					})
				})
				this.totalPrice = this.totalPrice.toFixed(2)
			},
			// 步进器
			stepChange(e) {
				console.log(e)
				this.$nextTick(() => {
					console.log(e)
					this.$my.post('/index/cart/plus_or_minus', {
						id: e.name,
						num: e.value
					}).then(res=>{
						this.page=1;
						if(res.code!=200){
							this.$my.toast(res.message)
							this.getList(true,this.list.length)
						}else{
							this.totalChangePrice()
							this.getList(true,this.list.length)
						}
					})
				})
			},
			// 点击列表多选 
			lisChange(e) {
				console.log(e, 'eeeeeeeeee')
				this.list.forEach(item1 => {
					item1.goods.forEach((item2, index2) => {
						item1.changeList = [];
					})
				})
				this.$nextTick(() => {
					this.checkboxValue1.forEach(item => {
						this.list.forEach(item1 => {
							item1.goods.forEach((item2, index2) => {
								if (item == item2.cart_id) {
									item1.changeList.push(item)
									item1.changeList = Array.from(new Set(item1
										.changeList))
								}
								if (item1.changeList.length == item1.goods.length) {
									item1.changeList.unshift('all')
								}
							})
						})

					})
				})
			},
			// 点击工厂和商铺  
			changeList(item) {
				this.$nextTick(function() {
					if (item.changeList.length > 0) {
						item.goods.forEach(item1 => {
							if (this.checkboxValue1.length > 0) {
								this.checkboxValue1.forEach(item2 => {
									if (item1.cart_id != item2) {
										this.checkboxValue1.push(item1.cart_id)
										// 去重
										this.checkboxValue1 = Array.from(new Set(this.checkboxValue1))
									}
								})
							} else {
								this.checkboxValue1.push(item1.cart_id)
							}
						})
					} else {
						item.goods.forEach(item1 => {
							this.checkboxValue1.forEach((item2, index) => {
								if (item1.cart_id == item2) {
									this.checkboxValue1.splice(index, 1)

								}
							})
						})
					}
				})
			},
			lisClick(type, id) {
				let url;
				// 工厂
				if (type == 1) {
					url = '/myPackageA/goodsAndFacton/store?store_id=' + id
				} else {
					// 店铺 3
					url = '/myPackageA/goodsAndFacton/store?store_id=' + id
				}
				this.$my.go(url)
			},
			// 删除
			del(val) {
				// val 有值表示是清空失效商品
				let _this = this;
				let id;
				if (val) {
					let arr = [];
					this.list1.forEach(item => {
						arr.push(item.cart_id)
					})
					id = arr.join(',')
				} else {
					id = this.checkboxValue1;
					if (this.checkboxValue1.length == 0) {
						this.$my.toast('请先选择要删除的列表')
						return
					}
				}
				uni.showModal({
					title: "",
					content: val ? '确定要清空所有失效商品吗？' : "确定要删除吗？",
					cancelText: '取消', // 取消按钮的文字   
					confirmText: '确认', // 确认按钮的文字   
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							})
							_this.$my.post('/index/cart/del', {
								id: id
							}).then(res => {
								uni.hideLoading()
								_this.$my.toast(res.message)
								if (res.code == 200) {
									_this.list = [];
									_this.list1=[];
									_this.page = 1;
									_this.getList();
									_this.checkboxValue1 = []
								}
							})
						}
					}
				})

			},
			getList(val,limit) {
				// this.list1=[];
				this.$my.get('/index/cart/list', {
					limit:limit?limit: 10,
					page: this.page,
				}).then(res => {
					if (res.code == 200) {
						this.last_page=res.data.last_page
						this.pageLoading = false; //关闭加载页
						this.list = this.list.concat(res.data.data)
						this.total = res.data.total;
						if(val){
							// 步进器
							let listCopy=this.list
							this.list=res.data.data;
							this.list.forEach((item,index)=>{
								item.changeList=listCopy[index].changeList
							})
						}else{
							this.list.forEach((item,index) => {
								// 工厂和商铺是否被选中
								if(!item.changeList){this.$set(item, "changeList", [])}
								let goodsArray=[];
								item.goods.forEach((itemm,indexx) => {
									if (itemm.disabled) {
										//失效商品  只有在total总条数等于列表的长度才会显示 (当商品展示完毕再显示过期商品)
										if(this.list.length==res.data.total){
											this.list1.push(itemm)
										}
									}else{
										goodsArray.push(itemm)
									}
								}) 
								item.goods=goodsArray
							})
						}
						// 如果列表里的商品全部过期就删除这个店铺
						this.total=0;
						this.list.forEach((item,index)=>{
							if(item.goods.length==0){
								this.list.splice(index,1)
							}
							this.total+=Number(item.goods.length)
						})
						if(this.isAll =='all'){
							this.checkboxChange(['all'])
						}
					}
				})
			},
			//复选框 全选
			checkboxChange(e) {
				this.checkboxValue1 = [];
				// this.isAll=['all']
				this.list.forEach(item => {
					item.goods.forEach(item1 => {
						if (e.length > 0) {
							this.checkboxValue1.push(item1.cart_id)
							item.changeList.push('all')
						} else {
							item.changeList = [];
							this.checkboxValue1 = []
						}
					})
				})
			},
			changeValue(e) {
				this.value = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnlook {
		padding: 0 15rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		background-color: #f5f5f5;
	}

	.btn {
		margin-left: 40rpx;
		padding: 0 76rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.bottomBoxCLick {
		width: 100%;
		left: 0;
		position: fixed;
		bottom:112rpx;
		background-color: #fff;
	}

	/deep/ .u-number-box__minus {
		border-right: 1rpx solid #ccc;
		width: 48rpx;
	}

	/deep/.u-number-box__plus {
		border-left: 1rpx solid #ccc;
		width: 48rpx;
	}

	/deep/ .u-number-box {
		border: 2rpx solid #CCCCCC;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.guige {
		margin: 12rpx 0;
	}

	.hunpi {
		margin-top: 8rpx;
		color: #5CA8EA;
		border-radius: 10rpx;
		border: 1rpx solid #B8D9F6;
		padding: 0 10rpx
	}
</style>
<style>
	page {
		padding-bottom: 200rpx;
	}
</style>
